/*
written by wong huang
*/


var BannerSilder=new Object();
BannerSilder["data"]=new Object();

var time=500;// time for change the image


/*initial default banner*/
function InitialBanner()
{
    //initial data
    var BannerConter=[
     {"imageUrl":"/resources/img/gaePic1.jpg","title":"Have you been through this?","content":" "}
    ,{"imageUrl":"/resources/img/gaePic2.jpg","title":"And this?","content":" "}
    ,{"imageUrl":"/resources/img/gaePic3.jpg","title":"And this?","content":" "}
    ,{"imageUrl":"/resources/img/gaePic4.jpg","title":"Now it's time to change","content":" "}
    ,{"imageUrl":"/resources/img/gaePic5.jpg","title":"And that's what you will get!","content":" "}
    ];

    $.each(BannerConter,function(k,v){
        AddBanner(k,v);
    });

    BannerSilder["length"]=BannerConter.length;

    //initial first 
    if(BannerSilder.length>0)
    BannerSilder["now"]="slider-background-0";
    
    $("#"+BannerSilder["now"]).show();

    $(".indicator a:first-child").addClass("selected");

    //binding click
    bindClick();
}

// when click
function bindClick()
{
        
    $(".slider-left").click(function(){
        
        if(BannerSilder.data[BannerSilder["now"]]==0)
        {
            BannerPrevious("slider-background-"+(BannerSilder.length-1));
        }else
        {
            BannerPrevious("slider-background-"+(BannerSilder.data[BannerSilder["now"]]-1));
        }
        //BannerNext(key);
    });

    //
    $(".slider-right").click(function(){

        if(BannerSilder.data[BannerSilder["now"]]==BannerSilder.length-1)
        {
            BannerNext("slider-background-0");
        }else
        {
            BannerNext("slider-background-"+(BannerSilder.data[BannerSilder["now"]]+1));
        }

    });


    $(".indicator a").click(function(){
        if($(this).attr("data-slide-to")>BannerSilder.data[BannerSilder["now"]])
        {
            BannerNext($(this).attr("data-target"));
        }else if($(this).attr("data-slide-to")<BannerSilder.data[BannerSilder["now"]])
        {
            BannerPrevious($(this).attr("data-target"));
        }

    });
}


/*add the structure*/
function AddBanner(k,v)
{    
    var key="slider-background-"+k;
    $(".sliderContainer").append("<div class='slide' id='"+key+"'><div class='slideImage' style='background-image:url("+v.imageUrl+")'></div><div class='layoutContainer'><div class='background'></div><div class='content'></div></div></div>");

    $(".indicator").append("<a data-target='"+key+"' data-slide-to='"+k+"' ></a>");

    BannerSilder.data[key]=k;
}


/*send in key*/
function BannerNext(key)
{
    $("#"+key).show().css("left","100%").animate({
        "left":"0%"
    },time);


    $("#"+BannerSilder["now"]).animate({
        "left":"-100%"
    },time);

    BannerSilder["now"]=key;
    
    $(".indicator a").removeClass("selected");
    $(".indicator a[data-target="+key+"]").addClass("selected");

}

function BannerPrevious(key)
{
    $("#"+key).show().css("left","-100%").animate({
        "left":"0%"
    },time);


    $("#"+BannerSilder["now"]).animate({
        "left":"100%"
    },time);

    BannerSilder["now"]=key;
    
    $(".indicator a").removeClass("selected");
    $(".indicator a[data-target="+key+"]").addClass("selected");
}





$(function(){
    InitialBanner();
    
});
  


